<template>
    <div class="out" :class="{notseen:isRecover}">
        <div class="up"><!--
            <i class="fas fa-book-reader i notseen" :class="{seen:isOpen}">已发布</i>
            <i class="fas fa-book i notseen" :class="{seen:isClose}">已关闭</i>
            <i class="fas fa-book-open i notseen" :class="{seen:isCreate}">创建</i>-->
        </div>
        <div class="downText">
            <p>标题：{{title}}</p>
            <div class="downTextInner">
                <p>回收量：{{receive}}份</p>
                <p>ID：{{id}}</p>
            </div>
        </div>
        <div class="downOp">
            <div class="previewOut" @click="toPreview">
                <i class="fas fa-search iii"></i><span>预览</span>
            </div>
            <div class="recoverOut" @click="recover">
                <i class="fas fa-times iii"></i><span>恢复</span>
            </div>
            <el-dropdown trigger="click" @command="handleCommand">
                <div class="moreOut">
                      <i class="fas fa-ellipsis-h iii" ></i><span>更多操作</span>
                </div>
                <el-dropdown-menu>
                    <el-dropdown-item command="statistic">分析</el-dropdown-item>
                    <!--
                    <el-dropdown-item command="open" class="notseen" :class="{seen:isCreate||isClose}">发布</el-dropdown-item>
                    <el-dropdown-item command="share" class="notseen" :class="{seen:isOpen}">分享</el-dropdown-item>
                    <el-dropdown-item command="close" class="notseen" :class="{seen:!isClose}">关闭</el-dropdown-item>
                    <el-dropdown-item command="delete">移动到回收站</el-dropdown-item>-->
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
import Questionnaire from '@/api/Questionnaire.js'
export default{
    name:'card',
    created(){
        if(this.status=='创建'){
            this.isCreate=true;
        }else if(this.status=='已发布'){
            this.isOpen=true;
        }
        else if(this.status=='已关闭'){
            this.isClose=true;
        }
    },
    mounted(){
    },
    data:function(){
        return{
            isCreate:false,
            isOpen:false,
            isClose:false,
            isRecover:false,
        }
    },
    props:{
        title:String,
        receive:Number,
        id:Number,
        status:String,
    },
    methods:{
        handleCommand:function(command){
           switch(command){
               case "export"://导出
                   break;
                case "copy"://复制
                    break;
                case "statistic"://分析
                    break;
                case "open"://发布
                    this.open();
                    break;
                case "share"://分享
                    this.$router.push("/share/" + this.id);
                    break;
                case "close"://关闭
                    this.close();
                    break;
                case "delete"://删除
                    this.delete();
                    break;
           }
        },
        toPreview:function(){
            this.$router.push("/edit/"+this.id + "?preview=true");
        },
        toEditWithId:function(){
            this.$router.push("/edit/"+this.id);
        },
        open:function(){
                Questionnaire.publish(this.id)
            .then(response=>{
                if(response.data.code===200){
                this.isOpen=true;
                this.isCreate=false;
                this.isOpen=false;
                this.status="已发布";
                this.$message.success("发布成功！");
                this.$router.push("/share/" + this.id);
                }else{
                this.$message.error(response.data.msg+" 发布失败！");
                }
            })
            .catch(error=>{
                this.$message.error(error+" 发布失败！");
            })
        },
        close:function(){
                this.axios.post('/questionnaire/close?qnid=' + this.id)
            .then(response=>{
                if(response.data.code===200){
                    this.isClose=true;
                    this.isCreate=false;
                    this.isOpen=false;
                    this.status="已关闭";
                    this.$message.success("关闭成功！");
                }else{
                this.$message.error(response.data.msg+" 关闭失败！");
                }
            })
            .catch(error=>{
                this.$message.error(error+" 关闭失败！");
            })
        },
        delete:function(){
            this.$confirm('确定删除吗？','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type:"warning",
            })
            .then(()=>{
            this.axios.delete('/questionnaire/remove?qnid=' + this.id)
            .then(response=>{
                    if(response.data.code===200){
                    console.log('delete'+this.id);
                    //删除id对应的对象
                    this.isDel=true;
                  this.$message.success("删除成功！");
                    }else{
                 this.$message.error(response.data.msg+" 删除失败！");
                }
                console.log(response.data.msg);
            })
            .catch(error=>{
                this.$message.error(error+" 删除失败！");
             })
            })
        },
        recover:function(){
        this.axios.post('/questionnaire/restore?qnid=' + this.id)
      .then(response=>{
        if(response.data.code===200){
            this.isRecover=true;
      console.log('recover'+this.id);
          this.$message.success("恢复成功！");
          location.reload();
        }else{
          this.$message.error(response.data.msg+"恢复失败！");
        }
        console.log("message  "+response.data.msg);
      })
      .catch(error=>{
        this.$message.error(error+" 恢复失败！");
      })
        },
    },
}
</script>
<style scoped>
i{
    cursor: pointer;
    font-size: 0.9rem;
}
.i{
    cursor:text;
    color:#e8eaf6;
    margin-left:0.9rem;
}
.out{
    width:13rem;
    height:13rem;
    background-image: url("../assets/survey3.jpg");
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0.2rem 0.4rem rgba(12, 11, 11, 0.4);
    margin:1rem;
    transition:2s;
}

.up{
    width: 13rem;
    height: 2rem;
    display: flex;
    align-items: center;
}
.downText{
    width:13rem;
    height:3rem;
    background-color:white;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight:600;
    color: #757575;
}
.downOp{
    width:13rem;
    height:3rem;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    display:none;
}
.downTextInner{
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.out:hover .downOp{
    display: flex;
}
.out:hover .downText{
    display:none;
}
.moreOut:hover{
    color:#03a9f4;
}
.previewOut:hover{
    color:#03a9f4;
}
.recoverOut:hover{
    color:#03a9f4;
}
span{
    display:none;
    font-size: 0.9rem;
    font-weight:700;
    cursor: pointer;
}
.previewOut,.recoverOut,.moreOut{
    display: flex;
    justify-content: center;
    align-items: center;
}
.previewOut:hover span{
    display:flex;
}
.recoverOut:hover span{
    display: flex;
}
.moreOut:hover span{
    display: flex;
}
.notseen{
    display: none;
}
.seen{
    display:flex;
}
</style>